<template>
  <div style="height: calc(100vh - 141px)">
    <el-row class="editbox">
      <el-col :span="4" class="editbox">
        <div class="editbox-content">
          <el-form
            ref="form"
            label-width="auto"
            label-position="top"
            class="dynamic-form"
            size="normal"
          >
            <el-row :gutter="10">
              <el-col :span="24">
                <template
                  v-for="orderedcontrol in orderedPluginsConfigs.configs"
                >
                  <div :key="orderedcontrol.executableTypeFullName">
                    <h4 style="color:#606266">{{ orderedcontrol.name }}</h4>
                    <template
                      v-for="(config, index) in orderedcontrol.configItems"
                    >
                      <p
                        :key="index"
                        @click="jump('plugin_item_' + config.id)"
                        style="padding-left:15px"
                      >
                         <el-link v-if="config.enabled"  :underline="false" >{{ (config.name||'').length>0?config.name:"(未命名)" }}</el-link>
                         <el-link v-else type="info" :underline="false">{{  (config.name||'').length>0?config.name:"(未命名)" }}</el-link>
                      </p>
                    </template>
                  </div>
                </template>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-col>
      <el-col :span="20" class="editbox">
        <div class="editbox-content">
          <el-form
            ref="form"
            label-width="auto"
            label-position="top"
            class="dynamic-form"
            size="normal"
          >
            <el-row :gutter="10">
              <el-col :span="24">
                <el-card
                  shadow="never"
                  style="margin-top: 10px"
                  v-for="orderedcontrol in orderedPluginsConfigs.configs"
                  :key="orderedcontrol.executableTypeFullName"
                >
                  <div slot="header">
                    <h4>{{ orderedcontrol.name }}</h4>
                  </div>
                  <draggable
                    v-model="orderedcontrol.configItems"
                    :animation="500"
                    dragClass="._draggable"
                    ghostClass="._draggable"
                    chosenClass="._draggable"
                    handle="._draggable"
                    @end="controlpanelEnd"
                    @add="controlpanelEnd"
                  >
                    <transition-group>
                      <template
                        v-for="(config, index) in orderedcontrol.configItems"
                      >
                        <el-card
                          shadow="never"
                          style="margin-top: 10px"
                          :key="index"
                        >
                          <el-link :underline="false" class="_draggable">
                            <i class="el-icon-rank"></i>
                            移动排序
                          </el-link>
                          <!-- 锚点 -->
                          <el-form-item
                            label="插件名称"
                            prop="configValue"
                            :label-width="defaultLabelWidth"
                            :class="'plugin_item_' + config.id"
                          >
                            <el-input
                              :disabled="
                                !config.enabled || !config.configurable
                              "
                              size="mini"
                              type="text"
                              v-model="config.name"
                            ></el-input>
                          </el-form-item>

                          <el-form-item
                            label="选择插件"
                            prop="configValue"
                            :label-width="defaultLabelWidth"
                          >
                            <el-select
                              :disabled="
                                !config.enabled || !config.configurable
                              "
                              filterable
                              size="mini"
                              style="width: 100%"
                              v-model="config.entryFullName"
                              placeholder="请选择"
                              @change="
                                entryChange(
                                  orderedcontrol.executableTypeFullName,
                                  config.entryFullName,
                                  config
                                )
                              "
                              default-first-option
                            >
                              <el-option
                                v-for="item in getManifestWConfigs(
                                  orderedcontrol.executableTypeFullName,
                                  config.configurable
                                )"
                                :key="item.className"
                                :label="item.name"
                                :value="item.className"
                              >
                              </el-option>
                            </el-select>

                            <el-input
                              class="description-textarea"
                              :readonly="true"
                              :autosize="true"
                              size="mini"
                              type="textarea"
                              v-model="config.pluginDescription"
                              :rows="4"
                            ></el-input>
                          </el-form-item>

                          <el-form-item
                            v-if="config.configurable"
                            label="参数配置："
                            prop="configValue"
                            :label-width="defaultLabelWidth"
                          >
                            <el-input
                              :disabled="!config.enabled"
                              size="mini"
                              type="textarea"
                              v-model="config.configValue"
                              :rows="4"
                            ></el-input>
                            <div>
                              <span style="color: #999999">
                                key=value
                                键值对，多个配置通过换行区分，或者任意其它格式，由插件自行解析
                              </span>
                            </div>
                          </el-form-item>

                          <el-form-item
                            v-if="config.configurable"
                            label="自定义描述："
                            prop="configValue"
                            :label-width="defaultLabelWidth"
                          >
                            <el-input
                              :disabled="!config.enabled"
                              size="mini"
                              type="textarea"
                              v-model="config.description"
                              :rows="4"
                            ></el-input>
                            <div>
                              <span style="color: #999999">
                                自定义的插件描述，根据插件的配置给予描述。对于可自定义配置插件，实际应用时，优先展示自定义的描述
                              </span>
                            </div>
                          </el-form-item>

                          <el-form-item
                            label=""
                            prop="configValue"
                            :label-width="defaultLabelWidth"
                          >
                            <el-checkbox v-model="config.enabled"
                              >是否启用</el-checkbox
                            >
                          </el-form-item>
                          <el-button
                            v-if="config.id == 0"
                            type="text"
                            @click="
                              removeConfigItem(
                                orderedcontrol.configItems,
                                index
                              )
                            "
                            >移除</el-button
                          >
                        </el-card>
                      </template>
                    </transition-group>
                  </draggable>
                  <el-button
                    type="text"
                    @click="addConfigItem(orderedcontrol.configItems)"
                    >添加插件</el-button
                  >
                </el-card>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TableIndex from "@/layout/mixin/TableIndex";
import draggable from "vuedraggable";
import controlPanel from "@/views/workflows/formDesign/controlPanel";
export default {
  components: {
    draggable,
    controlPanel,
  },
  mixins: [TableIndex],
  data() {
    return {
      form: {},
      defaultLabelWidth: "150px",
      pluginsConfigs: {
        // configs: [
        //   {
        //     executableTypeFullName: "WorkFlowCore.Conditions.ICondition",
        //     name: "条件处理器",
        //     configItems: [
        //       {
        //         id: 1,
        //         entryFullName:
        //           "WorkFlowCore.Framework.Conditions.BoolCondition",
        //         name: "布尔处理器",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 2,
        //         entryFullName:
        //           "WorkFlowCore.Framework.Conditions.GeneralCondition",
        //         name: "表单条件处理器",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 3,
        //         entryFullName:
        //           "WorkFlowCore.Framework.Conditions.JsonCondition",
        //         name: "Json条件处理器",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 4,
        //         entryFullName:
        //           "WorkFlowCore.Framework.Conditions.WorkStepCondition",
        //         name: "审批条件处理器",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 8,
        //         entryFullName: "Condition_PluginDemo.ConditionDemo",
        //         name: null,
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //     ],
        //   },
        //   {
        //     executableTypeFullName: "WorkFlowCore.UserSelectors.IUserSelector",
        //     name: "用户选择器",
        //     configItems: [
        //       {
        //         id: 5,
        //         entryFullName:
        //           "WorkFlowCore.Framework.UserSelectors.UserSelectorA",
        //         name: "按规则选择",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 6,
        //         entryFullName:
        //           "WorkFlowCore.Framework.UserSelectors.UserSelectorB",
        //         name: "按用户选择",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 7,
        //         entryFullName:
        //           "WorkFlowCore.Framework.UserSelectors.UserSelectorAllUsers",
        //         name: "按角色选择",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 9,
        //         entryFullName: "UserSelector_PluginDemo.UserSelectorDemo",
        //         name: null,
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //       {
        //         id: 10,
        //         entryFullName: "UserSelector_PluginDemo.UserSelectorDemo",
        //         name: "自定义用户选择器啊啊啊啊啊",
        //         configValue: "",
        //         enabled: true,
        //         order: 0,
        //       },
        //     ],
        //   },
        // ],
      },
      manifestWithConfigs: {},
    };
  },
  watch: {},
  computed: {
    orderedPluginsConfigs: {
      get() {
        return this.pluginsConfigs;
      },
      set(v) {
        this.pluginsConfigs = v;
      },
    },
  },
  mounted() {},
  methods: {
    controlpanelEnd(e) {
      console.log(e);
    },

    getControls() {
      this.pluginsConfigs.configs.forEach((control) => {
        for (var index = 0; index < control.configItems.length; index++) {
          control.configItems[index].order = index;
        }
      });

      return this.pluginsConfigs;
    },
    setControls(pluginsConfigs) {
      this.value = {};
      this.pluginsConfigs = pluginsConfigs;
      this.pluginsConfigs.configs.forEach((c) => {
        this.getManifestWithConfigs(c);
      });
    },
    getPageList() {},
    getManifestWithConfigs(config) {
      let executableTypeFullName = config.executableTypeFullName;
      if (this.manifestWithConfigs[executableTypeFullName]) return;
      this.loading.getPageList = true;
      let _this = this;
      this.$store
        .dispatch("plugin/getManifestWithConfigs", {
          executableTypeFullName: executableTypeFullName,
        })
        .then((res) => {
          this.loading.getPageList = false;
          this.$set(this.manifestWithConfigs, executableTypeFullName, res);
        })
        .catch((e) => {
          this.loading.getPageList = false;
        });
    },
    addConfigItem(configs) {
      configs.push({
        id: 0,
        entryFullName: "",
        name: "",
        configValue: "",
        enabled: true,
        order: 0,
        configurable: true,
      });
    },
    removeConfigItem(configs, index) {
      configs.splice(index, 1);
    },
    entryChange(executableTypeFullName, entryFullName, config) {
      let manifest = this.manifestWithConfigs[executableTypeFullName].filter(
        (m) => m.className == entryFullName
      )[0];
      config.configurable = manifest.configurable;
      config.pluginDescription = manifest.description;
    },

    getManifestWConfigs(executableTypeFullName, configurable) {
      if (configurable)
        return (this.manifestWithConfigs[executableTypeFullName] || []).filter(
          (m) => m.configurable
        );
      else return this.manifestWithConfigs[executableTypeFullName] || [];
    },
    jump(domId) {
      // 当前窗口正中心位置到指定dom位置的距离
      //页面滚动了的距离
      let height =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      //指定dom到页面顶端的距离
      let dom = document.getElementsByClassName(domId)[0];
      let domHeight = dom.offsetTop-40;

      //滚动距离计算
      var S = Number(height) - Number(domHeight);

      S = Math.abs(S);
      document
        .getElementsByClassName("editbox-content")[1]
        .scrollTo({ top: S, behavior: "smooth" });
    },
  },
};
</script>

<style lang="scss">
.dynamic-form .el-form-item__label {
  line-height: 30px !important;
  padding: 0px !important;
}

.editbox {
  height: 100%;
}
.editbox-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  // border: 1px solid #eeeeee;
  border-radius: 3px;
  // padding: 20px;
}

.options-content-option {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #eeeeee;
  border-radius: 3px;
  padding: 2px;
}

.options-content .el-form-item {
  margin-bottom: 2px;
}
/*定义要拖拽元素的样式*/
.ghostClass {
  background-color: #cccccc !important;
}
.chosenClass {
  background-color: #eeeeee !important;
  opacity: 1 !important;
}
.dragClass {
  background-color: #999999 !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  background-image: none !important;
}
.ctrl-empty:hover {
  background-color: #999999 !important;
}
.tag-move {
  cursor: move;
}
.description-textarea textarea {
  border: none !important;
}
</style>
